<template>
	<div id="detail">
		<detail-nav-bar class="nav-bar" ref="nav" @btnClick="navBtnClick"/>
		<scroll class="scroll" 
		ref="scroll" 
		:probe-type="3" 
		@scrollPosition="scrollPosition">
			<detail-swiper :topImages="topImages"/>
			<detail-base-info :goods="goods"/>
			<detail-shop-info :shop="shop"/>
			<detail-goods-info :detail-info="detailInfo" @imageLoad="goodsImgLoad"/>
			<detail-param-info ref="params" :param-info="paramInfo"/>
			<detail-comment-info ref="comment" :comment="comment"/>
			<goods-list ref="recommend" :goods="recommend"/>
		</scroll>
		<detail-bottom-bar class="bottom-bar" @addCart="addCart"/>
	</div>
</template>

<script>
	import DetailNavBar from './childComponents/DetailNavBar'
	import DetailSwiper from './childComponents/DetailSwiper'
	import DetailBaseInfo from './childComponents/DetailBaseInfo'
	import DetailShopInfo from './childComponents/DetailShopInfo'
	import DetailGoodsInfo from './childComponents/DetailGoodsInfo'
	import DetailParamInfo from './childComponents/DetailParamInfo'
	import DetailCommentInfo from './childComponents/DetailCommentInfo'
	import DetailBottomBar from './childComponents/DetailBottomBar'
	
	import Scroll from 'components/common/scroll/Scroll'
	import GoodsList from 'components/content/goods/GoodsList'
	
	import {getDetail, Goods, Shop, GoodsParam, getRecommend} from 'network/detail'
	
	import {itemListenerMixin} from 'common/mixin'
	
	export default{
		name: "Detail",
		data() {
			return {
				iid:null,
				topImages: [],
				goods: {},
				shop:{},
				detailInfo:{},
				paramInfo:{},
				comment:{},
				recommend: [],
				currentIndex:0,
				themeTopY:[]
			}
		},
		components: {
			DetailNavBar,
			DetailSwiper,
			DetailBaseInfo,
			DetailShopInfo,
			DetailGoodsInfo,
			DetailParamInfo,
			DetailCommentInfo,
			GoodsList,
			DetailBottomBar,
			Scroll
		},
		created() {
			this.iid = this.$route.params.iid
			getDetail(this.iid).then((res) => {
				const data = res.result
				// 详情页轮播图
				this.topImages = data.itemInfo.topImages
				// 商品基本信息
				this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
				// 店铺信息
				this.shop = new Shop(data.shopInfo)
				// 商品图片展示信息
				this.detailInfo = data.detailInfo
				// 商品参数信息
				this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
				// 商品评论信息
				this.comment = data.rate.list[0]
			})
			
			// 商品推荐信息
			getRecommend().then((res) => {
				this.recommend = res.data.list
			})
			
		},
		methods: {
			goodsImgLoad() {
				this.$refs.scroll.refresh()
				// 获取距离顶部的高度
				this.themeTopY = []
				this.themeTopY.push(0)
				this.themeTopY.push(this.$refs.params.$el.offsetTop)
				this.themeTopY.push(this.$refs.comment.$el.offsetTop)
				this.themeTopY.push(this.$refs.recommend.$el.offsetTop)		
				this.themeTopY.push(Number.MAX_VALUE)
			},
			// 跳转位置
			navBtnClick(index) {
				this.$refs.scroll.backTop(0, -this.themeTopY[index], 400)
			},
			// 监听当前位置,修改选中状态
			scrollPosition(position) {
				
				// [0, 7908, 8548, 8862]
				// 当 p >= 0 && p<7908 时 currentIndex=0
				// 当 p >= 7908 && p < 8548 时 currentIndex=1
				// 当 p >= 8548 && p< 8862 时 currentIndex=2
				// 当 p >= 8862 时 currentIndex=3
				// console.log(position.y)
				for(let i = 0; i < this.themeTopY.length - 1; i++){
					if(this.currentIndex !== i && -position.y >= this.themeTopY[i] && -position.y < this.themeTopY[i+1]){
						this.$refs.nav.currentIndex = i
						this.currentIndex = i
					}
				}
			},
			addCart() {
				// 1.获取购物车需要展示的信息
				const product = {}
				product.image = this.topImages[0]
				product.title = this.goods.title
				product.desc = this.goods.desc
				product.price = this.goods.realPrice
				product.iid = this.iid
				
				// 2.将商品添加到购物车里dispatch
				this.$store.dispatch('addCart', product).then(res => {
					this.$toast.show(res, 600)
				})
			},
		
		},
		mixins:[itemListenerMixin]
	}
</script>

<style scoped>
	#detail{
		height: 100%;
	}
	.scroll{
		position: absolute;
		z-index: 10;
		top: 44px;
		bottom: 49px;
		right: 0;
		left: 0;
		
		overflow: hidden;
		
		background: #fff;
	}
	
	.bottom-bar{
		z-index: 10;
	}
</style>
